<template>
    <div :key="route.fullPath">
        <h1>测试vueUse的鼠标坐标</h1>
        <h3>Mouse: {{ x }} x {{ y }}</h3>
        <use-pinia />
        <button @click="click">跳转</button>
        <div v-for="item in arr" :key="item">{{ item }}</div>
    </div>
</template>

<script lang="ts" setup>
import { useMouse, useArrayEvery } from '@vueuse/core';
import { reactive } from 'vue';
import { useRoute, onBeforeRouteUpdate, useRouter } from 'vue-router';
import usePinia from '@/components/usePinia.vue';
import { onMounted } from 'vue';
const route = useRoute();
const router = useRouter();
const arr = reactive([1, 2, 3, 4, 5]);
onMounted(() => {
    arr[0] = 111;
});
const click = () => {
    router.push({
        name: 'vueUse',
        params: { id: 1122 },
    });
};
const { x, y } = useMouse();
const obj = reactive({
    arr: [1, 2, 3, 4, 5],
});

const every = useArrayEvery(obj.arr, (i: number) => i % 2 === 0);

const fetchData = (id: string | string[]) => {
    console.log('这里是变化的id', id);
};

// 只能使用编程式导航
onBeforeRouteUpdate(async (to: any, form: any, next: any) => {
    console.log('更新路由', to, form);
    await fetchData(to.params.id);
    next();
});
</script>
